import React, { Fragment, useState, useEffect } from 'react';
import type { FC } from 'react';
import { Calendar } from 'antd';
import style from './index.less';
import { useRequest } from 'umi';
import { getCityCode } from './service';
import IconFont from '@/components/Icon';

/** 用到
 *  1. useRequest的使用  const {data,error,loading}  解构出 返回数据(需要有键data)、错误信息、加载中
 *  2. 图标的使用 type为iconfont的名称
 *  3. li 不带点
 *  4. 高德 IP获取地址接口 根据城市编码获取天气接口
 */
const Weather: FC<Record<string, any>> = () => {
  // 请求接口
  const { data, error, loading } = useRequest(async () => await getCityCode());

  return (
    <div className={style.container}>
      <div className={style.title}>
        <IconFont type="icontianqi" style={{ width: '25px', height: '25px' }} />
        <div>天气</div>
      </div>
      <div className={style.content}>
        <ul>
          <li>
            <IconFont type="iconchengshijianshe" className={style.icon} />
            {data?.lives[0].city}
          </li>
          <li>
            <IconFont type="icontianqi" className={style.icon} />
            {data?.lives[0].weather}
          </li>
          <li>
            <IconFont type="iconwenduji" className={style.icon} />
            {data?.lives[0].temperature}
          </li>
          <li>
            <IconFont type="iconfengxiangdai" className={style.icon} />
            {data?.lives[0].winddirection}
          </li>
          <li>
            <IconFont type="iconfengche" className={style.icon} />
            {data?.lives[0].windpower}
          </li>
        </ul>
      </div>
    </div>
  );
};
export default Weather;
